<template>
  <div>
    <div>学习生命周期 - 看控制台打印</div>
    <div id="myP">{{ msg }}</div>
    <ul id="myUl">
      <li v-for="(val, index) in arr" :key="index">{{ val }}</li>
    </ul>
    <button @click="arr.push(1000)">插入数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello，vue",
      arr: [1, 5, 5, 6, 8],
      timer: null,
    };
  },
  //   一、初始化
  // new Vue()以后，vue内部给实例对象添加了一些属性和方法，data和methods初始化之前
  beforeCreate() {
    console.log("beforeCreate --- 执行");
    console.log(this.msg);
  },
  // data和methods初始化以后
  //   场景：网络请求，注册全局事件
  created() {
    console.log("created --- 执行");
    console.log(this.msg);

    this.timer = setInterval(() => {
      console.log("111");
    }, 1000);
  },

  //   挂载
  //   真是dom挂载之前
  // 场景：预处理data，不会触发updated钩子函数
  beforeMount() {
    console.log("beforeMount -- 执行");
    console.log(document.getElementById("myP"));
    this.msg = "new string";
  },
  //   真是dom挂载以后
  // 场景：挂载后真实dom
  mounted() {
    console.log("mounted --- 执行");
    console.log(document.getElementById("myP"));
  },

  //   三、更新
  //   前提：data数据改变才执行
  // 更新之前
  beforeUpdate() {
    console.log("beforeUpdate -- 执行");
    console.log(document.querySelectorAll("#myUl>li")[5]);
  },
  //   更新之后
  // 场景：获取更新后的真是dom
  updated() {
    console.log("updated -- 执行");
    console.log(document.querySelectorAll("#myUl>li")[5]);
  },

  //  四、销毁
  //   前提：v-if="false" 销毁Vue实例
  // 使用场景：移除全局事件，移除当前组件，计时器定时器，eventBus移除$off方法
  beforeDestroy() {
    console.log("beforeDestroy -- 执行");
    clearInterval(this.timer);
  },
  destroyed() {
    console.log("destroy -- 执行");
  },
};
</script>

<style>
</style>